<template>
  <view class="start-index">
    <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Home ref="home"></Home>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower" :refresher-triggered="article" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
        <Article ref="article"></Article>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower" :refresher-triggered="project" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
        <Project ref="project"></Project>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
      <scroll-view scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower" :refresher-triggered="demand" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
        <Demand ref="demand"></Demand>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
      <scroll-view scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <Mine ref="mine"></Mine>
      </scroll-view>
    </view>
    
    <tn-tabbar
      v-model="currentIndex"
      :list="tabbarList"
      activeColor="#838383"
      inactiveColor="#AAAAAA"
      activeIconColor="#3668FC"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
    ></tn-tabbar>
  </view>
</template>

<script>
  import Home from './home/index.vue'
  import Article from './article/index.vue'
  import Project from './project/index.vue'
  import Demand from './demand/index.vue'
  import Mine from './mine/center.vue'
  
  export default {
    components: {
      Home,
      Article,
      Project,
      Demand,
      Mine
    },
    data() {
      return {
        // 底部tabbar菜单数据
        tabbarList: [
          {
            title: '首页',
            activeIcon: 'home-smile-fill',
            inactiveIcon: 'home-smile'
          },
          {
            title: '文章',
            activeIcon: 'write-feather-fill',
            inactiveIcon: 'write-feather'
          },
          {
            title: '案例',
            activeIcon: 'cube-fill',
            inactiveIcon: 'cube',
            activeIconColor: '#FFFFFF',
            inactiveIconColor: '#FFFFFF',
            iconSize: 50,
            out: true
          },
          {
            title: '方案',
            activeIcon: 'module-fill',
            inactiveIcon: 'module',
          },
          {
            title: '我的',
            activeIcon: 'my-fill',
            inactiveIcon: 'my'
          }
        ],
        article: false,
        project: false,
        demand: false,
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: []
      }
    },
    onLoad(options) {
      const index = Number(options.index || 0)
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
    },
    methods: {
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index);
      },
      
      // 瀑布流导航页面滚动到底部
      tabbarPageScrollLower(e) {
        if (this.currentIndex === 1) {
          this.$refs.article.getListData && this.$refs.article.getListData()
        }
        else if (this.currentIndex === 2) {
          this.$refs.project.getListData && this.$refs.project.getListData()
        }
        else if (this.currentIndex === 3) {
          this.$refs.demand.getListData && this.$refs.demand.getListData()
        }
      },
      onRefresh(e) {
        
        if(1 == this.currentIndex) {
          this.article = true
          setTimeout(() => {
              this.article = false;
          }, 500)
        }
        
        if(2 == this.currentIndex) {
          this.project = true
          setTimeout(() => {
              this.project = false;
          }, 500)
        }
        
        if(3 == this.currentIndex) {
          this.demand = true
          setTimeout(() => {
              this.demand = false;
          }, 500)
        }
      },
      onRestore() {
        if (this.currentIndex === 1) {
          this.$refs.article.query = {category_id: '',title: '',page: 1,limit: 4}
          this.$refs.article.list = []
          this.$refs.article.getListData && this.$refs.article.getListData()
        }
        else if (this.currentIndex === 2) {
          this.$refs.project.query = {category_id: '',title: '',page: 1,limit: 4}
          this.$refs.project.list = []
          this.$refs.project.getListData && this.$refs.project.getListData()
        }
        else if (this.currentIndex === 3) {
          this.$refs.demand.query = {category_id: '',title: '',page: 1,limit: 4}
          this.$refs.demand.list = []
          this.$refs.demand.getListData && this.$refs.demand.getListData()
        }
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>
